<template>
	<view class="container">
         <view class="red-box">
			 <view class="red-box-number">
				 <text class="red-box-number-title">请选择红包金额</text>
				 <view class="red-box-number-input">
					 <text class="red-box-number-input-text">50个</text>
				 </view>
			 </view>
			 <view class="red-list">
				 <block v-for="(item, index) in selectimgs" :key="index">
					 <view class="red-list-bg" @tap="checks(index)">
					 					 <image :src="selectsindex==index?selectimg:item['img']" class="red-list-bg" mode="widthFix" ></image>
					 					 <text class="red-nums">{{item['nums']}}</text>
					 </view>
				 </block>
				
			 </view>
			 <view class="red-button-box">
				
				 <view class="red-button" @tap="applyred()">
				 		 申请红包	  
				 </view>
				 <view class="red-button" @tap="redrecords()">
				 		红包明细
				 </view>
			 </view>
			 <view class="red-box-info">
				 <text class="red-box-info-title">
					 红包使用规则 
				 </text>
				 1，红包是一个推广工具，任何人都可以申请使用，每种红包一次可申请50个，使用完后才可以重复申请 3，使用过的红包，该红包费用将在发红包者的直推收益里面扣除 4，红包的金额可自由选择，使用时无任何限制，红包24小时内有效，过期作废，一个会员只能使用一次红包 5，会员是否有红包可以用，取决于他的推荐人是否开通了红包功能，是否开通属自愿行为
			 </view>
			
		 </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectimg: '/static/images/red/select.png',
			red_type:1,
			selectsindex:0,
			selectimgs:[{
					img: "/static/images/red/un_select.png",
					nums: "5",
					
				}, {
					img: "/static/images/red/un_select.png",
					nums: "8",
					
				},{
					img: "/static/images/red/un_select.png",
					nums: "10",
					
				}],
		};
	},
	onShow() {
		this.tui.haslogin();
	},
	methods: {
		
		applyred(){
			let token = this.tui.getToken();
			let datas={
				token:token,
				num_type:this.red_type,
			};
			let nicknames=this.tui.request('user','post',datas,1000,1,'','createCoupons');
			Promise.resolve(nicknames).then((value)=>{
			   if(value.code==200){
			   	this.tui.toast(value.message);
			   }else{
			   	this.tui.toast(value.message);
			   }
			})
		},
		redrecords(){
			uni.navigateTo({
				url: '/pageschild/red/redRecords'
			})
		},
		checks(e) {
	
			this.selectsindex=e
			this.red_type=e

		},
	}
};
</script>

<style lang="scss">
	.red-box{
		background:url('/static/images/red//redbgs.jpg') top left no-repeat;
		background-size: 100%;
		height: 2000rpx;
	}
	.red-box-number{
		width:60%;
		text-align: center;
		margin:0 auto;
		margin-top: 520rpx;
		
	}
	.red-nums{
		font-size: 40rpx;
		position: absolute;
		color:#969696;
		font-weight: bold;
		left:70rpx;
		top:10rpx;
		text-align: center;
	}
	.red-list{
		display: flex;
		width:70%;
		text-align: center;
		margin:0 auto;
		justify-content: space-around;
	}
	.red-button-box{
		width:74%;
		text-align: center;
		margin:0 auto;
		color:#95010e;
		margin-top: 40rpx;
	}
	.red-list-bg{
		position: relative;
		width:100%;
	}
	.red-box-info-title{
		text-align: center;
		display: block;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.red-box-info{
		color:#FFB96C;
		width:80%;
		margin:0 auto;
		padding-top:100rpx;
		line-height: 50rpx;
	}
	.red-box-number-title{
		color:#FFB96C;
		font-size: 34rpx;
	}
	.red-box-number-input{
		margin-top: 20rpx;
		
		line-height: 114rpx;
		text-align: left;
		background:url("/static/images/red//red-input.png") 0 0 no-repeat;
		width:100%;
		height: 120rpx;
		margin-left:-10rpx;
		background-size: 100%;
		color:#FA9220;
		font-weight: bold;
		font-size: 50rpx;
	}
	.red-box-number-input-text{
		margin-left: 20rpx;
	}
	.red-button{
		text-align: center;
		line-height: 68rpx;
		border-radius: 40rpx;
		color:#95010e;
		margin-top: 20rpx;
		margin-left: -10rpx;
		background:linear-gradient(180deg, #fac87b, 40%, #fd8848);
	}
.container {
background: #91111e;
	.tui-cell-input {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		
		input {
			flex: 1;
			padding-left: $uni-spacing-row-base;
		}
	}
	.tui-btn-box {
		padding: 40rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}
}
</style>
